import { Image, Radio } from 'ant-design-vue'

import logoStyles from '../../../assets/logo'
import collectionTemplates from '../../../assets/collection'
import noticeListTemplates from '../../../assets/notice'
import filterStyleTemplates from '../../../assets/filter'
import filterResultStyleTemplates from '../../../assets/filter-result'
import noticeIconTemplates from '../../../assets/notice-icon'
import closeIconTemplates from '../../../assets/close'
import gridIconTemplates from '../../../assets/grid-icon'
import gridCardIconTemplates from '../../../assets/grid-card'
import movieIconTemplates from '../../../assets/movie-icon'
import AnthologyIconTemplates from '../../../assets/anthology-icon'
import BottomIconTemplates from '../../../assets/bottom-icon'
import FilmRateIconTemplates from '../../../assets/filmrate-icon'
import IntroductionIncoTemplates from '../../../assets/introduction-icon'
import TabsIconTemplates from '../../../assets/tabs-icon'
import NovelIconTemplates from '../../../assets/novel-style'
import ArticleIconTemplates from '../../../assets/article-label'
import ExpandIconTemplates from '../../../assets/expand-icon'
import ButtonIconTemplates from '../../../assets/read-button'
import ReadStyleIconTemplates from '../../../assets/read-style'
import ArticleStyleIconTemplates from '../../../assets/article-icon'
import AtlasTopIconTemplates from '../../../assets/top-icon'

import type {
  TitleBarProps,
  TabBarProps,
  NoticeBarProps,
  LatestVideoProps,
  HottestVideoProps,
  CategoriesVideoProps,
  AlbumVideoProps,
  FixedVideoProps,
  MoreVideoListProps,
  FilterTabBarProps,
  MovieListProps,
  FilterCriteriaProps,
  FilterResultListProps,
  CategoriesGridProps,
  BriefIntroductionProps,
  BottomFunctionProps,
  CommonListProps,
  CollectionReadingProps,
  VideoAnthologyProps,
  FilmRatingProps,
  BriefIntrProps,
  TabsListProps,
  TitleTabbarProps,
  ArticleTabBarProps,
  ArticleSettingsProps,
  AtlasMoreListProps,
  GlobalSettingsProps,
  VideoListProps,
  GuessYouLikeProps,
  PlayCountProps,
  ParticipatingWorksProps,
  TopFunctionProps,
  CommonGlobalProps
} from '../base/arguments'

import {
  titleBarDefaultProps,
  tabBarDefaultProps,
  noticeBarDefaultProps,
  latestVideoPropsDefaultProps,
  hottestVideoDefaultProps,
  categoriesVideoDefaultProps,
  albumVideoDefaultProps,
  fixedVideoDefaultProps,
  moreVideoListDefaultProps,
  filterTabBarDefaultProps,
  movieListDefaultProps,
  filterCriteriaDefaultProps,
  filterResultListDefaultProps,
  categoriesGridDefaultProps,
  briefIntroductionDefaultProps,
  bottomFunctionDefaultProps,
  collectionReadingDefaultProps,
  filmRatingDefaultProps,
  videoAnthologyDefaultProps,
  briefIntrDefaultProps,
  tabsListDefaultProps,
  titleTabbarDefaultProps,
  articleTabBarDefaultProps,
  articleSettingsDefaultProps,
  atlasMoreListDefaultProps,
  globalSettingsDefaultProps,
  videoListDefaultProps,
  guessYouLikeDefaultProps,
  playCountDefaultProps,
  participatingWorksDefaultProps,
  topFunctionDefaultProps,
  commonListDefaultProps
} from '../base/defaultProps'
import type { ConfigComponent } from '../../../types'
import { searchBarGlobal, listGlobal, simpleGlobal, globalsComponent } from '../globals'

export const commonGlobalFields: CommonGlobalProps = {
  simple: { primary: 'global.primaryColor' },
  primaryTextColor: 'global.primaryTextColor',
  tagStyle: 'global.tagStyle',
  searchIcon: 'global.searchIcon',
  change: {
    style: 'global.change.style',
    enable: 'global.change.enable'
  },
  loadIcon: 'global.loadIcon',
  footer: {
    text: 'global.footer.text',
    color: 'global.footer.color'
  }
}

/** 分类标签 */
export const tabBar = (props: TabBarProps = tabBarDefaultProps): ConfigComponent => {
  const args = { ...tabBarDefaultProps, ...props }
  return {
    sort: args.sort as number,
    type: 'comp',
    icon: 'comp_categoriesTags',
    global: simpleGlobal({
      primary: commonGlobalFields.simple.primary
    }),
    schemas: [
      {
        tag: 'text',
        props: { class: 'setting-title', content: '当前页面背景色' }
      },
      {
        tag: 'form-item',
        props: {
          label: '背景填充色',
          class: 'px-4'
        },
        child: { tag: 'color', field: args.pageFields.background, defaultValue: 'rgba(56, 18, 179, 1)' }
      },
      { tag: 'divider' },
      {
        tag: 'text',
        props: { class: 'setting-title', content: '分类标签样式' }
      },
      {
        tag: 'form-item',
        props: {
          label: '背景填充色',
          class: 'px-4'
        },
        child: { tag: 'color', field: args.fields.background, defaultValue: 'rgba(0,120,179,1)' }
      },
      {
        tag: 'form-item',
        props: {
          label: '选中项横线色',
          class: 'px-4'
        },
        child: { tag: 'color', field: args.fields.indicator.color }
      },
      { tag: 'divider' },
      {
        tag: 'form-item',
        props: {
          label: '选中文字样式',
          class: 'px-4'
        },
        child: { tag: 'color', field: args.fields.text.selectedColor }
      },
      {
        tag: 'form-item',
        props: {
          class: 'px-4'
        },
        child: {
          tag: 'size',
          field: [args.fields.text.selectedSize, args.fields.text.letterSpacing, args.fields.text.lineHeight]
        }
      },
      { tag: 'divider' },
      {
        tag: 'form-item',
        props: {
          label: '未选中文字样式',
          class: 'px-4'
        },
        child: { tag: 'color', field: args.fields.text.color }
      },
      {
        tag: 'form-item',
        props: {
          class: 'px-4'
        },
        child: {
          tag: 'size',
          field: [args.fields.text.size, args.fields.text.letterSpacing, args.fields.text.lineHeight]
        }
      },
      { tag: 'divider' }
    ]
  }
}

/** 顶部搜索栏 */
export const titleBar = (props: TitleBarProps = titleBarDefaultProps): ConfigComponent => {
  const args = { ...titleBarDefaultProps, ...props }
  return {
    sort: args.sort as number,
    type: 'comp',
    icon: 'comp_appBar',
    global: simpleGlobal({
      primary: commonGlobalFields.simple.primary
    }),
    schemas: [
      {
        tag: 'text',
        props: { class: 'setting-title', content: '当前页面背景色' }
      },
      {
        tag: 'form-item',
        props: { label: '背景填充色', class: 'px-4' },
        child: { tag: 'color', field: args.pageFields.background, defaultValue: 'rgba(56, 181, 179, 1)' }
      },
      { tag: 'divider' },
      {
        tag: 'text',
        props: { class: 'setting-title', content: '顶部Logo' }
      },
      {
        tag: 'form-item-logo',
        logoList: logoStyles,
        field: args.fields.logo,
        props: {
          class: 'px-4 pb-2'
        }
      },
      { tag: 'divider' },
      {
        tag: 'text',
        props: { class: 'setting-title', content: '搜索框样式' }
      },
      {
        tag: 'form-item',
        props: {
          label: '外框圆角',
          class: 'px-4'
        },
        child: {
          tag: 'slider',
          field: args.fields.search.border.radius,
          props: {
            max: 22,
            min: 0
          }
        }
      },
      {
        tag: 'form-item',
        props: {
          label: '边框颜色',
          class: 'px-4'
        },
        children: [{ tag: 'color', field: args.fields.search.border.color, defaultValue: 'rgba(244,173,14,1)' }]
      },
      {
        tag: 'form-item',
        props: {
          label: '填充色',
          class: 'px-4'
        },
        children: [{ tag: 'color', field: args.fields.search.fill, defaultValue: 'rgba(32,112,158,1)' }]
      },
      { tag: 'divider' },
      {
        tag: 'text',
        props: { class: 'setting-title', content: '搜索栏提示文字' }
      },
      {
        tag: 'form-item',
        props: {
          label: '文字内容',
          class: 'px-4'
        },
        child: { tag: 'input', field: args.fields.search.placeholder, props: { placeholder: '请输入' } }
      },
      {
        tag: 'form-item',
        props: {
          label: '文字颜色',
          class: 'px-4'
        },
        child: { tag: 'color', field: args.fields.search.color, defaultValue: 'rgba(233,96,96,1)' }
      },
      {
        tag: 'form-item',
        props: {
          label: '搜索图标颜色',
          class: 'px-4'
        },
        child: { tag: 'color', field: args.fields.search.iconColor, defaultValue: 'rgba(237,242,243,1)' }
      },
      {
        tag: 'form-item',
        props: {
          label: '文字+图标位置',
          class: 'px-4'
        },
        child: { tag: 'text-icon-position', field: args.fields.search.align }
      },
      { tag: 'divider' },
      {
        tag: 'text',
        props: { class: 'setting-title', content: '收藏模板' }
      },
      {
        tag: 'form-item',
        props: {
          label: '更换图标',
          class: 'px-4'
        },
        child: {
          tag: 'radio-group',
          custom: true,
          field: args.fields.collection.style,
          props: {
            class: 'flex items-center justify-between'
          },
          slots: {
            default: () => (
              <>
                {Object.keys(collectionTemplates).map((item, idx) => (
                  <Radio value={idx + 1} class="w-10">
                    <div class="icon w-9 h-9">
                      <Image preview={false} src={collectionTemplates[item]}></Image>
                    </div>
                    <span class="title">模板{idx + 1}</span>
                  </Radio>
                ))}
              </>
            )
          }
        }
      }
    ]
  }
}

/** 公告栏 */
export const noticeBar = (props: NoticeBarProps = noticeBarDefaultProps): ConfigComponent => {
  const args = { ...noticeBarDefaultProps, ...props }
  return {
    sort: args.sort as number,
    type: 'comp',
    icon: 'comp_bulletinBoard',
    global: simpleGlobal({
      primary: commonGlobalFields.simple.primary
    }),
    schemas: [
      {
        tag: 'text',
        props: { class: 'setting-title', content: '当前页面背景色' }
      },
      {
        tag: 'form-item',
        props: {
          label: '背景填充色',
          class: 'px-4'
        },
        child: { tag: 'color', field: args.pageFields.background }
      },
      { tag: 'divider' },
      {
        tag: 'text',
        props: { class: 'setting-title', content: '公告栏样式' }
      },
      {
        tag: 'form-item',
        props: {
          label: '按钮样式',
          class: 'px-4'
        },
        child: {
          tag: 'radio-group',
          field: args.fields.style,
          custom: false,
          iconTemplate: true,
          props: {
            class: 'block w-full flex flex-col'
          },
          slots: {
            default: () => {
              return (
                <>
                  {noticeListTemplates.map((item, idx) => (
                    <div class="mb-2">
                      <Radio value={idx + 1} class="w-full text-left">
                        <span class="title">样式{idx + 1}</span>
                      </Radio>
                      <Image preview={false} src={item.icon} class="mt-2"></Image>
                    </div>
                  ))}
                </>
              )
            }
          }
        }
      },
      { tag: 'divider' },
      {
        tag: 'form-item',
        props: {
          label: '背景填充色',
          class: 'px-4'
        },
        child: { tag: 'color', field: args.fields.background }
      },
      { tag: 'divider' },
      // {
      //   tag: 'form-item',
      //   props: {
      //     label: '公告栏高度',
      //     class: 'px-4'
      //   },
      //   child: { tag: 'input-number', field: args.fields.height }
      // },
      {
        tag: 'form-item',
        props: {
          label: '文字设置',
          class: 'px-4'
        },
        child: { tag: 'color', field: args.fields.text.color }
      },
      {
        tag: 'form-item',
        props: {
          // label: '文字选中字号',
          class: 'px-4'
        },
        child: {
          tag: 'size',
          field: [args.fields.text.size, args.fields.text.letterSpacing, args.fields.text.lineHeight]
        }
      },
      {
        tag: 'form-item',
        props: {
          label: '滚动间隔',
          class: 'px-4'
        },
        child: {
          tag: 'select',
          field: args.fields.duration,
          props: {
            placeholder: '请选择',
            options: [
              { value: 1000, label: '1000ms' },
              { value: 1500, label: '1500ms' },
              { value: 2000, label: '2000ms' },
              { value: 3000, label: '3000ms' },
              { value: 3500, label: '3500ms' },
              { value: 4000, label: '4000ms' },
              { value: 4500, label: '4500ms' },
              { value: 5000, label: '5000ms' }
            ]
          }
        }
      },
      { tag: 'divider' },
      {
        tag: 'text',
        props: { class: 'setting-title', content: '公告图标' }
      },
      {
        tag: 'form-item',
        props: {
          label: '更换图标',
          class: 'px-4'
        },
        child: {
          tag: 'radio-group',
          field: args.fields.iconStyle,
          custom: true,
          props: {
            class: 'flex items-center justify-between'
          },
          slots: {
            default: () => {
              return (
                <>
                  {Object.keys(noticeIconTemplates).map((item, idx) => (
                    <Radio value={idx + 1} class="w-10">
                      <div class="icon w-9 h-9 px-1">
                        <Image preview={false} src={noticeIconTemplates[item]}></Image>
                      </div>
                      <span class="title">模板{idx + 1}</span>
                    </Radio>
                  ))}
                </>
              )
            }
          }
        }
      },
      { tag: 'divider' },
      {
        tag: 'text',
        props: { class: 'setting-title', content: '关闭图标' }
      },
      {
        tag: 'form-item',
        props: {
          label: '更换图标',
          class: 'px-4'
        },
        child: {
          tag: 'radio-group',
          field: args.fields.closeStyle,
          custom: true,
          props: {
            class: 'flex item-center justify-start'
          },
          slots: {
            default: () => {
              return (
                <>
                  <div>
                    {Object.keys(closeIconTemplates).map((item, idx) => (
                      <div class={idx === 1 ? 'ml-[67px] inline-block' : 'inline-block'}>
                        <Radio value={idx + 1} class="w-10">
                          <div class="icon w-9 h-9 px-1">
                            <Image preview={false} src={closeIconTemplates[item]}></Image>
                          </div>
                          <span class="title">模板{idx + 1}</span>
                        </Radio>
                      </div>
                    ))}
                  </div>
                </>
              )
            }
          }
        }
      }
    ]
  }
}

/** 最新视频列表 */
export const latestVideo = (props: LatestVideoProps = latestVideoPropsDefaultProps): ConfigComponent => {
  const args = { ...latestVideoPropsDefaultProps, ...props }
  return {
    sort: args.sort as number,
    type: 'comp',
    global: listGlobal(commonGlobalFields),
    icon: 'comp_latestVideoList',
    schemas: [
      {
        tag: 'text',
        props: { class: 'setting-title', content: '当前页面背景色' }
      },
      {
        tag: 'form-item',
        props: {
          label: '背景填充色',
          class: 'px-4'
        },
        child: { tag: 'color', field: args.pageFields.background }
      },
      { tag: 'divider' },
      {
        tag: 'text',
        props: { class: 'setting-title', content: '列表标题设置' }
      },
      {
        tag: 'form-item',
        props: {
          label: '文字设置',
          class: 'px-4'
        },
        child: { tag: 'color', field: args.fields.title!.color }
      },
      {
        tag: 'form-item',
        props: {
          class: 'px-4'
        },
        child: {
          tag: 'size',
          field: [args.fields.title!.size, args.fields.title!.letterSpacing, args.fields.title!.lineHeight]
        }
      },
      { tag: 'divider' },
      {
        tag: 'text',
        props: { class: 'setting-title', content: '列表显示样式' }
      },
      {
        tag: 'form-item',
        props: {
          label: '选择样式',
          class: 'px-4'
        },
        child: {
          tag: 'radio-group',
          field: args.fields.layout.style,
          custom: true,
          props: {
            class: 'flex justify-between'
          },
          slots: {
            default: () => {
              return (
                <>
                  {Object.keys(gridIconTemplates).map((item, idx) => (
                    <Radio value={idx + 1} class="w-16">
                      <div class="icon w-[60px] h-[60px] px-1 ">
                        <Image preview={false} src={gridIconTemplates[item]}></Image>
                      </div>
                      <span class="title">{idx === 0 ? '2列平铺' : idx === 1 ? '3列平铺' : '横向滚动'}</span>
                    </Radio>
                  ))}
                </>
              )
            }
          }
        }
      },
      { tag: 'divider' },
      {
        tag: 'text',
        props: { class: 'setting-title', content: '列表影片数量' }
      },
      {
        tag: 'form-item',
        props: {
          label: '影片数量',
          class: 'px-4'
        },
        child: {
          tag: 'slider',
          field: args.fields.layout.limit
        }
      }
    ]
  }
}

/** 最热视频列表 */
export const hottestVideo = (props: HottestVideoProps = hottestVideoDefaultProps): ConfigComponent => {
  const args = { ...hottestVideoDefaultProps, ...props }
  return {
    sort: args.sort as number,
    type: 'comp',
    icon: 'comp_hottestVideoList',
    global: listGlobal(commonGlobalFields),
    schemas: [
      {
        tag: 'text',
        props: { class: 'setting-title', content: '当前页面背景色' }
      },
      {
        tag: 'form-item',
        props: {
          label: '背景填充色',
          class: 'px-4'
        },
        child: { tag: 'color', field: args.pageFields.background }
      },
      { tag: 'divider' },
      {
        tag: 'text',
        props: { class: 'setting-title', content: '列表标题设置' }
      },
      {
        tag: 'form-item',
        props: {
          label: '文字设置',
          class: 'px-4'
        },
        child: { tag: 'color', field: args.fields.title!.color }
      },
      {
        tag: 'form-item',
        props: {
          class: 'px-4'
        },
        child: {
          tag: 'size',
          field: [args.fields.title!.size, args.fields.title!.letterSpacing, args.fields.title!.lineHeight]
        }
      },
      { tag: 'divider' },
      {
        tag: 'text',
        props: { class: 'setting-title', content: '列表显示样式' }
      },
      {
        tag: 'form-item',
        props: {
          label: '选择样式',
          class: 'px-4'
        },
        child: {
          tag: 'radio-group',
          field: args.fields.layout.style,
          custom: true,
          props: {
            class: 'flex justify-between'
          },
          slots: {
            default: () => {
              return (
                <>
                  {Object.keys(gridIconTemplates).map((item, idx) => (
                    <Radio value={idx + 1} class="w-16">
                      <div class="icon w-[60px] h-[60px] px-1 ">
                        <Image preview={false} src={gridIconTemplates[item]}></Image>
                      </div>
                      <span class="title">{idx === 0 ? '2列平铺' : idx === 1 ? '3列平铺' : '横向滚动'}</span>
                    </Radio>
                  ))}
                </>
              )
            }
          }
        }
      },
      { tag: 'divider' },
      {
        tag: 'text',
        props: { class: 'setting-title', content: '列表影片数量' }
      },
      {
        tag: 'form-item',
        props: {
          label: '影片数量',
          class: 'px-4'
        },
        child: {
          tag: 'slider',
          field: args.fields.layout.limit
        }
      }
    ]
  }
}

/** 分类视频列表 */
export const categoriesVideo = (props: CategoriesVideoProps = categoriesVideoDefaultProps): ConfigComponent => {
  const args = { ...categoriesVideoDefaultProps, ...props }
  return {
    sort: args.sort as number,
    type: 'comp',
    icon: 'comp_categoriesVideoList',
    global: listGlobal(commonGlobalFields),
    schemas: [
      {
        tag: 'text',
        props: { class: 'setting-title', content: '当前页面背景色' }
      },
      {
        tag: 'form-item',
        props: {
          label: '背景填充色',
          class: 'px-4'
        },
        child: { tag: 'color', field: args.pageFields.background }
      },
      { tag: 'divider' },
      {
        tag: 'text',
        props: { class: 'setting-title', content: '列表标题设置' }
      },
      {
        tag: 'form-item',
        props: {
          label: '文字设置',
          class: 'px-4'
        },
        child: { tag: 'color', field: args.fields.title!.color }
      },
      {
        tag: 'form-item',
        props: {
          class: 'px-4'
        },
        child: {
          tag: 'size',
          field: [args.fields.title!.size, args.fields.title!.letterSpacing, args.fields.title!.lineHeight]
        }
      },
      { tag: 'divider' },
      {
        tag: 'text',
        props: { class: 'setting-title', content: '列表显示样式' }
      },
      {
        tag: 'form-item',
        props: {
          label: '选择样式',
          class: 'px-4'
        },
        child: {
          tag: 'radio-group',
          field: args.fields.layout.style,
          custom: true,
          props: {
            class: 'flex justify-between'
          },
          slots: {
            default: () => {
              return (
                <>
                  {Object.keys(gridIconTemplates).map((item, idx) => (
                    <Radio value={idx + 1} class="w-16">
                      <div class="icon w-[60px] h-[60px] px-1 ">
                        <Image preview={false} src={gridIconTemplates[item]}></Image>
                      </div>
                      <span class="title">{idx === 0 ? '2列平铺' : idx === 1 ? '3列平铺' : '横向滚动'}</span>
                    </Radio>
                  ))}
                </>
              )
            }
          }
        }
      },
      { tag: 'divider' },
      {
        tag: 'text',
        props: { class: 'setting-title', content: '列表影片数量' }
      },
      {
        tag: 'form-item',
        props: {
          label: '影片数量',
          class: 'px-4'
        },
        child: {
          tag: 'slider',
          field: args.fields.layout.limit
        }
      }
    ]
  }
}

/** 专辑视频列表 */
export const albumVideo = (props: AlbumVideoProps = albumVideoDefaultProps): ConfigComponent => {
  const args = { ...albumVideoDefaultProps, ...props }
  return {
    sort: args.sort as number,
    type: 'comp',
    icon: 'comp_albumVideoList',
    global: listGlobal(commonGlobalFields),
    schemas: [
      {
        tag: 'text',
        props: { class: 'setting-title', content: '当前页面背景色' }
      },
      {
        tag: 'form-item',
        props: {
          label: '背景填充色',
          class: 'px-4'
        },
        child: { tag: 'color', field: args.pageFields.background, defaultValue: 'rgba(11,150,110,1)' }
      },
      { tag: 'divider' },
      {
        tag: 'text',
        props: { class: 'setting-title', content: '列表标题设置' }
      },
      {
        tag: 'form-item',
        props: {
          label: '文字设置',
          class: 'px-4'
        },
        child: { tag: 'color', field: args.fields.title!.color }
      },
      {
        tag: 'form-item',
        props: {
          class: 'px-4'
        },
        child: {
          tag: 'size',
          field: [args.fields.title!.size, args.fields.title!.letterSpacing, args.fields.title!.lineHeight]
        }
      },
      { tag: 'divider' },
      {
        tag: 'text',
        props: { class: 'setting-title', content: '列表显示样式' }
      },
      {
        tag: 'form-item',
        props: {
          label: '选择样式',
          class: 'px-4'
        },
        child: {
          tag: 'radio-group',
          field: args.fields.layout.style,
          custom: true,
          props: {
            class: 'flex justify-between'
          },
          slots: {
            default: () => {
              return (
                <>
                  {Object.keys(gridIconTemplates).map((item, idx) => (
                    <Radio value={idx + 1} class="w-16">
                      <div class="icon w-[60px] h-[60px] px-1 ">
                        <Image preview={false} src={gridIconTemplates[item]}></Image>
                      </div>
                      <span class="title">{idx === 0 ? '2列平铺' : idx === 1 ? '3列平铺' : '横向滚动'}</span>
                    </Radio>
                  ))}
                </>
              )
            }
          }
        }
      },
      { tag: 'divider' },
      {
        tag: 'text',
        props: { class: 'setting-title', content: '列表影片数量' }
      },
      {
        tag: 'form-item',
        props: {
          label: '影片数量',
          class: 'px-4'
        },
        child: {
          tag: 'slider',
          field: args.fields.layout.limit
        }
      }
    ]
  }
}

/** 固定视频列表 */
export const fixedVideo = (props: FixedVideoProps = fixedVideoDefaultProps): ConfigComponent => {
  const args = { ...fixedVideoDefaultProps, ...props }
  return {
    sort: args.sort as number,
    type: 'comp',
    icon: 'comp_fixedVideoList',
    global: listGlobal(commonGlobalFields),
    schemas: [
      {
        tag: 'text',
        props: { class: 'setting-title', content: '当前页面背景色' }
      },
      {
        tag: 'form-item',
        props: {
          label: '背景填充色',
          class: 'px-4'
        },
        child: { tag: 'color', field: args.pageFields.background }
      },
      { tag: 'divider' },
      {
        tag: 'text',
        props: { class: 'setting-title', content: '列表显示样式' }
      },
      {
        tag: 'form-item',
        props: {
          label: '选择样式',
          class: 'px-4'
        },
        child: {
          tag: 'radio-group',
          field: args.fields.layout.style,
          custom: true,
          props: {
            class: 'flex justify-between'
          },
          slots: {
            default: () => {
              return (
                <>
                  {Object.keys(gridIconTemplates).map((item, idx) => (
                    <Radio value={idx + 1} class="w-16">
                      <div class="icon w-[60px] h-[60px] px-1 ">
                        <Image preview={false} src={gridIconTemplates[item]}></Image>
                      </div>
                      <span class="title">{idx === 0 ? '2列平铺' : idx === 1 ? '3列平铺' : '横向滚动'}</span>
                    </Radio>
                  ))}
                </>
              )
            }
          }
        }
      },
      { tag: 'divider' },
      {
        tag: 'text',
        props: { class: 'setting-title', content: '列表影片数量' }
      },
      {
        tag: 'form-item',
        props: {
          label: '影片数量',
          class: 'px-4'
        },
        child: {
          tag: 'slider',
          field: args.fields.layout.limit
        }
      }
    ]
  }
}

/** 更多视频列表 */
export const moreVideoList = (props: MoreVideoListProps = moreVideoListDefaultProps): ConfigComponent => {
  const args = { ...moreVideoListDefaultProps, ...props }
  return {
    sort: args.sort as number,
    icon: 'comp_moreVideoList',
    type: 'comp',
    global: listGlobal(commonGlobalFields),
    schemas: [
      {
        tag: 'text',
        props: { class: 'setting-title', content: '当前页面背景色' }
      },
      {
        tag: 'form-item',
        props: {
          label: '背景填充色',
          class: 'px-4'
        },
        child: { tag: 'color', field: args.pageFields.background }
      },
      { tag: 'divider' },
      {
        tag: 'text',
        props: { class: 'setting-title', content: '列表显示样式' }
      },
      {
        tag: 'form-item',
        props: {
          label: '选择样式:',
          class: 'px-4'
        },
        child: {
          tag: 'radio-group',
          field: args.fields.layout.style,
          custom: true,
          props: {},
          slots: {
            default: () => {
              return (
                <>
                  <div>
                    {Object.keys(gridCardIconTemplates).map((item, idx) => (
                      <Radio value={idx + 1} class="w-16" style={idx === 1 ? 'margin-left:24px' : ''}>
                        <div class="icon w-[60px] h-[60px] px-1">
                          <Image preview={false} src={gridCardIconTemplates[item]}></Image>
                        </div>
                        <span class="title">{idx === 0 ? '2列平铺' : '卡片平铺'}</span>
                      </Radio>
                    ))}
                  </div>
                </>
              )
            }
          }
        }
      },
      { tag: 'divider' },
      {
        tag: 'text',
        props: { class: 'setting-title', content: '列表影片数量' }
      },
      {
        tag: 'form-item',
        props: {
          label: '影片数量:',
          class: 'px-4'
        },
        child: {
          tag: 'slider',
          field: args.fields.layout.limit
        }
      }
    ]
  }
}

/** 筛选分类标签 */
export const filterTabBar = (props: FilterTabBarProps = filterTabBarDefaultProps): ConfigComponent => {
  const args = { ...filterTabBarDefaultProps, ...props }
  return {
    sort: args.sort as number,
    type: 'comp',
    icon: 'comp_filterTabBar',
    global: simpleGlobal(),
    schemas: [
      {
        tag: 'text',
        props: { class: 'setting-title', content: '当前页面背景色' }
      },
      {
        tag: 'form-item',
        props: {
          label: '背景填充色',
          class: 'px-4'
        },
        child: { tag: 'color', field: args.pageFields.background }
      },
      { tag: 'divider' },
      {
        tag: 'text',
        props: { class: 'setting-title', content: '筛选标签填充色' }
      },
      {
        tag: 'form-item',
        props: {
          label: '未选中色',
          class: 'px-4'
        },
        child: { tag: 'color', field: args.fields.tag.color }
      },
      {
        tag: 'form-item',
        props: {
          label: '选中颜色',
          class: 'px-4'
        },
        child: { tag: 'color', field: args.fields.tag.selected }
      },
      { tag: 'divider' },
      {
        tag: 'text',
        props: { class: 'setting-title', content: '筛选标签边框' }
      },
      {
        tag: 'form-item',
        props: {
          label: '未选中色',
          class: 'px-4'
        },
        child: { tag: 'color', field: args.fields.border.color }
      },
      {
        tag: 'form-item',
        props: {
          label: '选中颜色',
          class: 'px-4'
        },
        child: { tag: 'color', field: args.fields.border.selected }
      },
      {
        tag: 'form-item',
        props: {
          label: '外框圆角:',
          class: 'px-4'
        },
        child: {
          tag: 'slider',
          field: args.fields.border.radius,
          props: {
            max: 22,
            min: 0
          }
        }
      },
      { tag: 'divider' },
      {
        tag: 'text',
        props: { class: 'setting-title', content: '选项框文字' }
      },
      {
        tag: 'form-item',
        props: {
          label: '选中文字样式',
          class: 'px-4'
        },
        child: { tag: 'color', field: args.fields.text.selectedColor }
      },
      {
        tag: 'form-item',
        props: {
          class: 'px-4'
        },
        child: {
          tag: 'size',
          field: [args.fields.text.selectedSize, args.fields.text.letterSpacing, args.fields.text.lineHeight]
        }
      },

      {
        tag: 'form-item',
        props: {
          label: '未选中文字样式',
          class: 'px-4'
        },
        child: { tag: 'color', field: args.fields.text.color }
      },
      {
        tag: 'form-item',
        props: {
          class: 'px-4'
        },
        child: {
          tag: 'size',
          field: [args.fields.text.size, args.fields.text.letterSpacing, args.fields.text.lineHeight]
        }
      },
      { tag: 'divider' }
    ]
  }
}

/** 影人列表 */
export const movieList = (props: MovieListProps = movieListDefaultProps): ConfigComponent => {
  const args = { ...movieListDefaultProps, ...props }
  return {
    sort: args.sort as number,
    type: 'comp',
    icon: 'comp_movieList',
    global: listGlobal(commonGlobalFields, 'loading'),
    schemas: [
      {
        tag: 'text',
        props: { class: 'setting-title', content: '当前页面背景色' }
      },
      {
        tag: 'form-item',
        props: {
          label: '背景填充色',
          class: 'px-4'
        },
        child: { tag: 'color', field: args.pageFields.background, defaultValue: 'rgba(112,102,10,1)' }
      },
      { tag: 'divider' },
      {
        tag: 'text',
        props: { class: 'setting-title', content: '列表显示样式' }
      },
      {
        tag: 'form-item',
        props: {
          label: '选择样式',
          class: 'px-4'
        },
        child: {
          tag: 'radio-group',
          field: args.fields.layout.style,
          custom: true,
          props: {},
          slots: {
            default: () => {
              return (
                <>
                  <div>
                    {Object.keys(movieIconTemplates).map((item, idx) => (
                      <Radio value={idx + 1} class="w-16" style={idx === 1 ? 'margin-left:24px' : ''}>
                        <div class="icon w-[60px] h-[60px] px-1">
                          <Image preview={false} src={movieIconTemplates[item]}></Image>
                        </div>
                        <span class="title">{idx === 0 ? '3列平铺' : '4列平铺'}</span>
                      </Radio>
                    ))}
                  </div>
                </>
              )
            }
          }
        }
      },
      {
        tag: 'text',
        props: { class: 'setting-title', content: '列表项名字颜色' }
      },
      {
        tag: 'form-item',
        props: {
          label: '文字颜色',
          class: 'px-4'
        },
        child: { tag: 'color', field: args.fields.color }
      },
      { tag: 'divider' },
      {
        tag: 'text',
        props: { class: 'setting-title', content: '列表分页设置' }
      },
      {
        tag: 'form-item',
        props: {
          label: '一次获取明星数量',
          class: 'px-4'
        },
        child: {
          tag: 'slider',
          field: args.fields.layout.limit,
          props: {
            max: 22,
            min: 0
          }
        }
      },
      { tag: 'divider' }
    ]
  }
}

/** 筛选条件 */
export const filterCriteria = (props: FilterCriteriaProps = filterCriteriaDefaultProps): ConfigComponent => {
  const args = { ...filterCriteriaDefaultProps, ...props }
  return {
    sort: args.sort as number,
    title: '筛选条件',
    type: 'comp',
    icon: 'comp_filterCriteria',
    global: searchBarGlobal(),
    schemas: [
      {
        tag: 'text',
        props: { class: 'setting-title', content: '当前页面背景色' }
      },
      {
        tag: 'form-item',
        props: {
          label: '背景填充色',
          class: 'px-4'
        },
        child: { tag: 'color', field: args.pageFields.background, defaultValue: 'rgba(5,11,179,1)' }
      },
      { tag: 'divider' },
      {
        tag: 'text',
        props: { class: 'setting-title', content: '列表显示样式' }
      },
      {
        tag: 'form-item',
        props: {
          label: '选择样式',
          class: 'px-4'
        },
        child: {
          tag: 'radio-group',
          custom: false,
          iconTemplate: true,
          field: args.fields.style,
          props: {
            class: 'block w-full flex flex-col'
          },
          slots: {
            default: () => {
              return (
                <>
                  {filterStyleTemplates.map((item, idx) => (
                    <div class="mb-2">
                      <Radio value={idx + 1} class="w-full text-left">
                        <span class="title">{item.label}</span>
                      </Radio>
                      <Image preview={false} src={item.icon} class="mt-2"></Image>
                    </div>
                  ))}
                </>
              )
            }
          }
        }
      },
      { tag: 'divider' },
      {
        tag: 'text',
        props: { class: 'setting-title', content: '筛选标签边框' }
      },
      {
        tag: 'form-item',
        props: {
          label: '边框颜色',
          class: 'px-4'
        },
        child: { tag: 'color', field: args.fields.border.color, defaultValue: 'rgba(56,181,179,1)' }
      },
      {
        tag: 'form-item',
        props: {
          label: '外框圆角',
          class: 'px-4'
        },
        child: {
          field: args.fields.border.radius,
          tag: 'slider'
        }
      },
      { tag: 'divider' },
      {
        tag: 'text',
        props: { class: 'setting-title', content: '选项框填充色' }
      },
      {
        tag: 'form-item',
        props: {
          label: '填充色',
          class: 'px-4'
        },
        child: { tag: 'color', field: args.fields.fill, defaultValue: 'rgba(233,96,96,1)' }
      },
      { tag: 'divider' },
      {
        tag: 'text',
        props: { class: 'setting-title', content: '选项框文字颜色' }
      },
      {
        tag: 'form-item',
        props: {
          label: '未选中颜色',
          class: 'px-4'
        },
        child: { tag: 'color', field: args.fields.text.color, defaultValue: 'rgba(195,196,197,1)' }
      },
      {
        tag: 'form-item',
        props: {
          label: '选中颜色',
          class: 'px-4'
        },
        child: { tag: 'color', field: args.fields.text.selectedColor, defaultValue: 'rgba(244,173,14,1)' }
      }
    ]
  }
}

/** 筛选结果列表 */
export const filterResultList = (props: FilterResultListProps = filterResultListDefaultProps): ConfigComponent => {
  const args = { ...filterResultListDefaultProps, ...props }
  return {
    type: 'comp',
    title: '筛选结果列表',
    sort: args.sort as number,
    icon: 'comp_filterResultList',
    global: listGlobal(commonGlobalFields, 'list-loading'),
    schemas: [
      {
        tag: 'text',
        props: { class: 'setting-title', content: '当前页面背景色' }
      },
      {
        tag: 'form-item',
        props: {
          label: '背景填充色',
          class: 'px-4'
        },
        child: { tag: 'color', field: args.pageFields.background }
      },
      { tag: 'divider' },
      {
        tag: 'text',
        props: { class: 'setting-title', content: '列表显示样式' }
      },
      {
        tag: 'form-item',
        props: {
          label: '选择样式',
          class: 'px-4'
        },
        child: {
          tag: 'radio-group',
          custom: true,
          field: args.fields.layout.style,
          slots: {
            default: () => {
              return (
                <>
                  <div>
                    {filterResultStyleTemplates.map((item, idx) => (
                      <Radio value={idx + 1} class="w-16" style={idx === 1 ? 'margin-left:24px' : ''}>
                        <div class="icon w-[60px] h-[60px] px-1">
                          <Image preview={false} src={item.icon}></Image>
                        </div>
                        <span class="title">{item.label}</span>
                      </Radio>
                    ))}
                  </div>
                </>
              )
            }
          }
        }
      },
      { tag: 'divider' },
      {
        tag: 'text',
        props: { class: 'setting-title', content: '列表分页设置' }
      },
      {
        tag: 'form-item',
        props: {
          label: args.type === 'atlas' ? '图集数量' : '一次获取影片数量',
          class: 'px-4'
        },
        child: { tag: 'slider', field: args.fields.layout.limit }
      }
    ]
  }
}

/** 视频列表 */
export const videoList = (props: VideoListProps = videoListDefaultProps): ConfigComponent => {
  const args = { ...videoListDefaultProps, ...props }
  return {
    type: 'comp',
    title: '视频列表',
    icon: 'comp_videoList',
    sort: args.sort as number,
    global: listGlobal(commonGlobalFields, 'list-loading'),
    schemas: [
      {
        tag: 'text',
        props: { class: 'setting-title', content: '当前页面背景色' }
      },
      {
        tag: 'form-item',
        props: {
          label: '背景填充色',
          class: 'px-4'
        },
        child: { tag: 'color', field: args.pageFields.background, defaultValue: 'rgba(56,181,179,1)' }
      },
      { tag: 'divider' },

      {
        tag: 'text',
        props: { class: 'setting-title', content: '列表显示样式' }
      },
      {
        tag: 'form-item',
        props: {
          label: '选择样式',
          class: 'px-4'
        },
        child: {
          tag: 'radio-group',
          field: args.fields.layout.style,
          custom: true,
          props: {},
          slots: {
            default: () => {
              return (
                <>
                  <div>
                    {filterResultStyleTemplates.map((item, idx) => (
                      <Radio value={idx + 1} class="w-16" style={idx === 1 ? 'margin-left:24px' : ''}>
                        <div class="icon w-[60px] h-[60px] px-1">
                          <Image preview={false} src={item.icon}></Image>
                        </div>
                        <span class="title">{item.label}</span>
                      </Radio>
                    ))}
                  </div>
                </>
              )
            }
          }
        }
      },
      { tag: 'divider' },
      {
        tag: 'text',
        props: { class: 'setting-title', content: '列表分页设置' }
      },
      {
        tag: 'form-item',
        props: {
          label: '一次获取影片数量',
          class: 'px-4'
        },
        child: { tag: 'slider', field: args.fields.layout.limit }
      }
    ]
  }
}

/** 选集 */
export const videoAnthology = (props: VideoAnthologyProps = videoAnthologyDefaultProps): ConfigComponent => {
  const args = { ...videoAnthologyDefaultProps, ...props }
  return {
    sort: args.sort as number,
    title: '选集',
    type: 'comp',
    icon: 'comp_anthology',
    global: simpleGlobal({
      primary: commonGlobalFields.simple.primary
    }),
    schemas: [
      {
        tag: 'text',
        props: { class: 'setting-title', content: '当前页面背景色' }
      },
      {
        tag: 'form-item',
        props: {
          label: '背景填充色',
          class: 'px-4'
        },
        child: { tag: 'color', field: args.pageFields.background, defaultValue: 'rgba(56,181,179,1)' }
      },
      { tag: 'divider' },
      {
        tag: 'text',
        props: { class: 'setting-title', content: '电视剧选集样式' }
      },
      {
        tag: 'form-item',
        props: {
          label: '选择样式：',
          class: 'px-4'
        },
        child: {
          tag: 'radio-group',
          field: args.fields.style,
          custom: false,
          iconTemplate: true,
          props: {
            class: 'block w-full flex flex-col'
          },
          slots: {
            default: () => {
              return (
                <>
                  {AnthologyIconTemplates.map((item, idx) => (
                    <div class="mb-2">
                      <Radio value={idx + 1} class="w-full text-left">
                        <span class="title">{item.label}</span>
                      </Radio>
                      <Image preview={false} src={item.icon} class="mt-2"></Image>
                    </div>
                  ))}
                </>
              )
            }
          }
        }
      },
      { tag: 'divider' },
      {
        tag: 'form-item',
        props: {
          label: '选中边框颜色',
          class: 'px-4'
        },
        child: { tag: 'color', field: args.fields.selectedBorderColor, defaultValue: 'rgba(56,181,179,1)' }
      },
      {
        tag: 'form-item',
        props: {
          label: '选中边框填充色',
          class: 'px-4'
        },
        child: { tag: 'color', field: args.fields.selectedBackground, defaultValue: 'rgba(0,244,0,1)' }
      },
      {
        tag: 'form-item',
        props: {
          label: '文字选中色',
          class: 'px-4'
        },
        child: { tag: 'color', field: args.fields.selectTextColor, defaultValue: 'rgba(56,181,179,1)' }
      },
      {
        tag: 'form-item',
        props: {
          label: '外框圆角',
          class: 'px-4'
        },
        child: {
          tag: 'slider',
          field: args.fields.radius,
          props: {
            max: 22,
            min: 0
          }
        }
      },
      { tag: 'divider' }
    ]
  }
}

/** 猜你喜欢 */
export const guessYouLike = (props: GuessYouLikeProps = guessYouLikeDefaultProps): ConfigComponent => {
  const args = { ...guessYouLikeDefaultProps, ...props }
  return {
    type: 'comp',
    title: '猜你喜欢',
    icon: 'comp_guessYouLike',
    sort: args.sort as number,
    global: listGlobal(commonGlobalFields),
    schemas: [
      {
        tag: 'text',
        props: { class: 'setting-title', content: '当前页面背景色' }
      },
      {
        tag: 'form-item',
        props: {
          label: '背景填充色',
          class: 'px-4'
        },
        child: { tag: 'color', field: args.pageFields.background, defaultValue: 'rgba(56,181,179,1)' }
      },
      { tag: 'divider' },
      {
        tag: 'form-item',
        props: {
          label: '列表标题设置',
          class: 'px-4'
        },
        child: { tag: 'color', field: args.fields.title!.color, defaultValue: 'rgba(255,255,254,1)' }
      },
      {
        tag: 'form-item',
        props: {
          class: 'px-4'
        },
        child: {
          tag: 'size',
          field: [args.fields.title!.size, args.fields.title!.letterSpacing, args.fields.title!.lineHeight]
        }
      },
      { tag: 'divider' },
      {
        tag: 'text',
        props: { class: 'setting-title', content: '列表显示样式' }
      },
      {
        tag: 'form-item',
        props: {
          label: '选择样式',
          class: 'px-4'
        },
        child: {
          tag: 'radio-group',
          field: args.fields.layout.style,
          custom: true,
          props: {},
          slots: {
            default: () => {
              return (
                <>
                  <div>
                    {filterResultStyleTemplates.map((item, idx) => (
                      <Radio value={idx + 1} class="w-16" style={idx === 1 ? 'margin-left:24px' : ''}>
                        <div class="icon w-[60px] h-[60px] px-1">
                          <Image preview={false} src={item.icon}></Image>
                        </div>
                        <span class="title">{item.label}</span>
                      </Radio>
                    ))}
                  </div>
                </>
              )
            }
          }
        }
      },
      { tag: 'divider' },
      {
        tag: 'text',
        props: { class: 'setting-title', content: '列表影片数量' }
      },
      {
        tag: 'form-item',
        props: {
          label: '影片数量：',
          class: 'px-4'
        },
        child: { tag: 'slider', field: args.fields.layout.limit }
      },
      { tag: 'divider' }
    ]
  }
}

/** 底部功能 */
export const bottomFunction = (props: BottomFunctionProps = bottomFunctionDefaultProps): ConfigComponent => {
  const args = { ...bottomFunctionDefaultProps, ...props }
  return {
    type: 'comp',
    title: '底部功能',
    icon: 'comp_bottomFunction',
    sort: args.sort as number,
    global: simpleGlobal({
      primary: commonGlobalFields.simple.primary
    }),
    schemas: [
      {
        tag: 'text',
        props: { class: 'setting-title', content: '当前页面背景色' }
      },
      {
        tag: 'form-item',
        props: {
          label: '背景填充色',
          class: 'px-4'
        },
        child: { tag: 'color', field: args.pageFields.background, defaultValue: 'rgba(56,181,179,1)' }
      },
      { tag: 'divider' },
      {
        tag: 'text',
        props: { class: 'setting-title', content: '底部功能组件样式' }
      },
      {
        tag: 'form-item',
        props: {
          label: '选择样式：',
          class: 'px-4'
        },
        child: {
          tag: 'radio-group',
          field: args.fields.style,
          custom: false,
          iconTemplate: true,
          props: {
            class: 'block w-full flex flex-col'
          },
          slots: {
            default: () => {
              return (
                <>
                  {BottomIconTemplates.map((item, idx) => (
                    <div class="mb-2">
                      <Radio value={idx + 1} class="w-full text-left">
                        <span class="title">{item.label}</span>
                      </Radio>
                      <Image preview={false} src={item.icon} class="mt-2"></Image>
                    </div>
                  ))}
                </>
              )
            }
          }
        }
      },
      { tag: 'divider' }
    ]
  }
}

/** 影片评分 */
export const filmRating = (props: FilmRatingProps = filmRatingDefaultProps): ConfigComponent => {
  const args = { ...filmRatingDefaultProps, ...props }
  return {
    sort: args.sort as number,
    title: '影片评分',
    type: 'comp',
    icon: 'comp_filmRating',

    global: simpleGlobal({
      primary: commonGlobalFields.simple.primary
    }),
    schemas: [
      {
        tag: 'text',
        props: { class: 'setting-title', content: '当前页面背景色' }
      },
      {
        tag: 'form-item',
        props: {
          label: '背景填充色',
          class: 'px-4'
        },
        child: { tag: 'color', field: args.pageFields.background, defaultValue: 'rgba(56,181,179,1)' }
      },
      { tag: 'divider' },
      {
        tag: 'text',
        props: { class: 'setting-title', content: '分值填充色设置' }
      },
      {
        tag: 'form-item',
        props: {
          label: '文字颜色',
          class: 'px-4'
        },
        child: { tag: 'color', field: args.fields.color, defaultValue: 'rgba(56,181,179,1)' }
      },
      { tag: 'divider' },
      {
        tag: 'text',
        props: { class: 'setting-title', content: '评分图标设置' }
      },
      {
        tag: 'form-item',
        props: {
          label: '选择图标：',
          class: 'px-4'
        },
        child: {
          tag: 'radio-group',
          field: args.fields.iconStyle,
          custom: true,
          props: {
            class: 'flex items-center justify-between'
          },
          slots: {
            default: () => (
              <>
                {Object.keys(FilmRateIconTemplates).map((item, idx) => (
                  <Radio value={idx + 1} class="w-10">
                    <div class="icon w-9 h-9">
                      <Image preview={false} src={FilmRateIconTemplates[item]}></Image>
                    </div>
                    <span class="title">模板{idx + 1}</span>
                  </Radio>
                ))}
              </>
            )
          }
        }
      },
      {
        tag: 'form-item',
        props: {
          label: '图标填充色',
          class: 'px-4'
        },
        child: { tag: 'color', field: args.fields.fill, defaultValue: 'rgba(56,181,179,1)' }
      },
      { tag: 'divider' }
    ]
  }
}

/** 播放次数 */
export const playCount = (props: PlayCountProps = playCountDefaultProps): ConfigComponent => {
  const args = { ...playCountDefaultProps, ...props }
  return {
    type: 'comp',
    title: '播放次数',
    icon: 'comp_playCount',
    sort: args.sort as number,

    global: simpleGlobal({
      primary: commonGlobalFields.simple.primary
    }),
    schemas: [
      {
        tag: 'text',
        props: { class: 'setting-title', content: '当前页面背景色' }
      },
      {
        tag: 'form-item',
        props: {
          label: '背景填充色',
          class: 'px-4'
        },
        child: { tag: 'color', field: args.pageFields.background, defaultValue: 'rgba(56,181,179,1)' }
      },
      { tag: 'divider' },
      {
        tag: 'text',
        props: { class: 'setting-title', content: '播放次数设置' }
      },
      {
        tag: 'form-item',
        props: {
          label: '是否显示：',
          class: 'px-4 flex flex-row play-count-text'
        },
        child: {
          tag: 'radio-group',
          field: args.fields.enable,
          props: {
            options: [
              { value: 1, label: '是' },
              { value: 2, label: '否' }
            ],
            class: 'pd-2'
          }
        }
      },
      { tag: 'divider' }
    ]
  }
}

/** 简介 */
export const briefIntroduction = (props: BriefIntrProps = briefIntrDefaultProps): ConfigComponent => {
  const args = { ...briefIntrDefaultProps, ...props }
  return {
    type: 'comp',
    title: '简介',
    icon: 'comp_briefIntroduction',
    sort: args.sort as number,
    global: simpleGlobal({
      primary: commonGlobalFields.simple.primary
    }),
    schemas: [
      {
        tag: 'text',
        props: { class: 'setting-title', content: '当前页面背景色' }
      },
      {
        tag: 'form-item',
        props: {
          label: '背景填充色',
          class: 'px-4'
        },
        child: { tag: 'color', field: args.pageFields.background, defaultValue: 'rgba(56,181,179,1)' }
      },
      { tag: 'divider' },
      {
        tag: 'text',
        props: { class: 'setting-title', content: '简介内容最多显示行数' }
      },
      {
        tag: 'form-item',
        props: {
          label: '行数数量：',
          class: 'px-4'
        },
        child: {
          tag: 'slider',
          field: args.fields.maxLine,
          props: {
            max: 22,
            min: 0,
            showInput: false
          }
        }
      },
      {
        tag: 'text',
        props: { class: 'setting-title', content: '展示图标' }
      },
      {
        tag: 'form-item',
        props: {
          label: '是否显示：',
          class: 'px-4 flex flex-row play-count-text'
        },
        child: {
          tag: 'radio-group',
          field: args.fields.moreButton.enable,
          props: {
            options: [
              { value: 1, label: '是' },
              { value: 2, label: '否' }
            ],
            class: 'pd-2'
          }
        }
      },
      {
        tag: 'form-item',
        props: {
          label: '图标样式：',
          class: 'px-4'
        },
        child: {
          tag: 'radio-group',
          field: args.fields.moreButton.style,
          custom: true,
          props: {},
          slots: {
            default: () => {
              return (
                <>
                  <div>
                    {Object.keys(IntroductionIncoTemplates).map((item, idx) => (
                      <div class={idx === 1 ? 'ml-11 inline-block' : 'inline-block'}>
                        <Radio value={idx + 1} class="w-10">
                          <div class="icon w-9 h-9 px-1">
                            <Image preview={false} src={IntroductionIncoTemplates[item]}></Image>
                          </div>
                          <span class="title">模板{idx + 1}</span>
                        </Radio>
                      </div>
                    ))}
                  </div>
                </>
              )
            }
          }
        }
      },
      { tag: 'divider' }
    ]
  }
}

/** 参与作品列表 */
export const participatingWorks = (
  props: ParticipatingWorksProps = participatingWorksDefaultProps
): ConfigComponent => {
  const args = { ...participatingWorksDefaultProps, ...props }
  return {
    type: 'comp',
    title: '参与作品列表',
    icon: 'comp_participatingWorks',
    sort: args.sort as number,
    global: listGlobal(commonGlobalFields, 'list-only'),
    schemas: [
      {
        tag: 'text',
        props: { class: 'setting-title', content: '当前页面背景色' }
      },
      {
        tag: 'form-item',
        props: {
          label: '背景填充色',
          class: 'px-4'
        },
        child: { tag: 'color', field: args.pageFields.background, defaultValue: 'rgba(56,181,179,1)' }
      },
      { tag: 'divider' },
      {
        tag: 'text',
        props: { class: 'setting-title', content: '列表显示样式' }
      },
      {
        tag: 'form-item',
        props: {
          label: '选择样式：',
          class: 'px-4'
        },
        child: {
          tag: 'radio-group',
          field: args.fields.layout.style,
          custom: true,
          props: {},
          slots: {
            default: () => {
              if (args?.actorMore) {
                return (
                  <>
                    <Radio value={1}>
                      <div class="icon w-[60px] h-[60px] px-1 ">
                        <Image preview={false} src={gridIconTemplates['grid_3']}></Image>
                      </div>
                    </Radio>
                  </>
                )
              } else {
                return (
                  <>
                    <div>
                      {filterResultStyleTemplates.map((item, idx) => (
                        <Radio value={idx + 1} class="w-16" style={idx === 1 ? 'margin-left:24px' : ''}>
                          <div class="icon w-[60px] h-[60px] px-1">
                            <Image preview={false} src={item.icon}></Image>
                          </div>
                          <span class="title">{item.label}</span>
                        </Radio>
                      ))}
                    </div>
                  </>
                )
              }
            }
          }
        }
      },
      { tag: 'divider' },
      {
        tag: 'text',
        props: { class: 'setting-title', content: '列表影片数量' }
      },
      {
        tag: 'form-item',
        props: {
          label: '影片数量：',
          class: 'px-4'
        },
        child: {
          tag: 'slider',
          field: args.fields.layout.limit,
          props: {
            max: 22,
            min: 0
          }
        }
      },
      { tag: 'divider' }
    ]
  }
}

/** 选项卡 */
export const tabsList = (props: TabsListProps = tabsListDefaultProps): ConfigComponent => {
  const args = { ...tabsListDefaultProps, ...props }
  return {
    sort: args.sort as number,
    title: '选项卡',
    type: 'comp',
    icon: 'comp_tabs',
    global: simpleGlobal({
      primary: commonGlobalFields.simple.primary
    }),
    schemas: [
      {
        tag: 'text',
        props: { class: 'setting-title', content: '当前页面背景色' }
      },
      {
        tag: 'form-item',
        props: {
          label: '背景填充色',
          class: 'px-4'
        },
        child: { tag: 'color', field: args.pageFields.background, defaultValue: 'rgba(56,181,179,1)' }
      },
      { tag: 'divider' },
      {
        tag: 'text',
        props: { class: 'setting-title', content: '选项卡样式' }
      },
      {
        tag: 'form-item',
        props: {
          label: '选择样式：',
          class: 'px-4'
        },
        child: {
          tag: 'radio-group',
          field: args.fields.style,
          custom: false,
          iconTemplate: true,
          props: {
            class: 'block w-full flex flex-col'
          },
          slots: {
            default: () => {
              return (
                <>
                  {TabsIconTemplates.map((item, idx) => (
                    <div class="mb-2">
                      <Radio value={idx + 1} class="w-full text-left">
                        <span class="title">{item.label}</span>
                      </Radio>
                      <Image preview={false} src={item.icon} class="mt-2"></Image>
                    </div>
                  ))}
                </>
              )
            }
          }
        }
      },
      { tag: 'divider' },
      {
        tag: 'text',
        props: { class: 'setting-title', content: '分类标签样式' }
      },
      {
        tag: 'form-item',
        props: {
          label: '背景填充色',
          class: 'px-4'
        },
        child: { tag: 'color', field: args.fields.background, defaultValue: 'rgba(56,181,179,1)' }
      },
      {
        tag: 'form-item',
        props: {
          label: '选择项横线色',
          class: 'px-4'
        },
        child: { tag: 'color', field: args.fields.indicator.color, defaultValue: 'rgba(0,244,0,1)' }
      },
      { tag: 'divider' },
      {
        tag: 'form-item',
        props: {
          label: '选中文字样式',
          class: 'px-4'
        },
        child: { tag: 'color', field: args.fields.text.selectedColor, defaultValue: 'rgba(56,181,179,1)' }
      },
      {
        tag: 'form-item',
        props: {
          class: 'px-4'
        },
        child: {
          // SIZE TODO
          tag: 'size',
          field: args.fields.text.selectedSize
        }
      },
      { tag: 'divider' },
      {
        tag: 'form-item',
        props: {
          label: '未选中文字样式',
          class: 'px-4'
        },
        child: { tag: 'color', field: args.fields.text.color }
      },
      {
        tag: 'form-item',
        props: {
          class: 'px-4'
        },
        child: {
          // SIZE TODO
          tag: 'size',
          field: args.fields.text.size
        }
      },
      { tag: 'divider' }
    ]
  }
}

/** 标题栏 */
export const titleTabbar = (props: TitleTabbarProps = titleTabbarDefaultProps): ConfigComponent => {
  const args = { ...titleTabbarDefaultProps, ...props }
  return {
    type: 'comp',
    title: '标题栏',
    icon: 'comp_titleBar',
    sort: args.sort as number,
    global: searchBarGlobal(),
    schemas: [
      {
        tag: 'text',
        props: { class: 'setting-title', content: '当前页面背景色' }
      },
      {
        tag: 'form-item',
        props: {
          label: '背景填充色',
          class: 'px-4'
        },
        child: { tag: 'color', field: args.pageFields.background, defaultValue: 'rgba(56,181,179,1)' }
      },
      { tag: 'divider' },
      {
        tag: 'text',
        props: { class: 'setting-title', content: '标题栏背景色' }
      },
      {
        tag: 'form-item',
        props: {
          label: '背景填充色',
          class: 'px-4'
        },
        child: { tag: 'color', field: args.fields.background, defaultValue: 'rgba(56,181,179,1)' }
      },
      { tag: 'divider' },
      {
        tag: 'text',
        props: { class: 'setting-title', content: '标题颜色' }
      },
      {
        tag: 'form-item',
        props: {
          label: '标题颜色',
          class: 'px-4'
        },
        child: { tag: 'color', field: args.fields.titleColor, defaultValue: 'rgba(56,181,179,1)' }
      },
      { tag: 'divider' }
    ]
  }
}

/** 分类宫格 */
export const categoriesGrid = (props: CategoriesGridProps = categoriesGridDefaultProps): ConfigComponent => {
  const args = { ...categoriesGridDefaultProps, ...props }
  return {
    type: 'comp',
    title: '分类宫格',
    icon: 'comp_categoriesGrid',
    sort: args.sort as number,
    global: simpleGlobal({
      primary: commonGlobalFields.simple.primary
    }),
    schemas: [
      {
        tag: 'text',
        props: { class: 'setting-title', content: '当前页面背景色' }
      },
      {
        tag: 'form-item',
        props: {
          label: '背景填充色',
          class: 'px-4'
        },
        child: { tag: 'color', field: args.pageFields.background, defaultValue: 'rgba(56,181,179,1)' }
      },
      { tag: 'divider' },
      {
        tag: 'text',
        props: { class: 'setting-title', content: '功能样式' }
      },
      {
        tag: 'form-item',
        props: {
          label: '功能样式',
          class: 'px-4'
        },
        child: {
          tag: 'radio-group',
          custom: true,
          props: {
            class: 'flex justify-between'
          },
          field: args.fields.cols,
          slots: {
            default: () => {
              return (
                <>
                  {Object.keys(ArticleStyleIconTemplates).map((item, idx) => (
                    <Radio value={idx + 1} class="w-10">
                      <div class="icon w-9 h-9 px-1 ">
                        <Image preview={false} src={ArticleStyleIconTemplates[item]}></Image>
                      </div>
                      <span class="title">{5 - idx}列</span>
                    </Radio>
                  ))}
                </>
              )
            }
          }
        }
      },
      { tag: 'divider' },
      {
        tag: 'form-item',
        props: {
          label: '风格样式',
          class: 'px-4'
        },
        child: {
          tag: 'radio-group',
          custom: false,
          iconTemplate: true,
          props: {
            class: 'block w-full flex flex-col'
          },
          field: args.fields.style,
          slots: {
            default: () => {
              return (
                <>
                  {NovelIconTemplates.map((item, idx) => (
                    <div class="mb-2">
                      <Radio value={idx + 1} class="w-full text-left">
                        <span class="title">样式{idx + 1}</span>
                      </Radio>
                      <Image preview={false} src={item.icon} class="mt-2"></Image>
                    </div>
                  ))}
                </>
              )
            }
          }
        }
      },
      { tag: 'divider' }
    ]
  }
}

/** 文章列表 免费图集 热门图集 */
export const commonList = (props: CommonListProps = commonListDefaultProps): ConfigComponent => {
  const args = { ...commonListDefaultProps, ...props }
  return {
    type: 'comp',
    title: '文章列表',
    icon: args.type === 'article' ? 'comp_articleList' : args.type === 'atlas' ? 'comp_freeAtlas' : 'comp_hotAtlas',
    sort: args.sort as number,
    global: listGlobal(commonGlobalFields),
    schemas: [
      {
        tag: 'text',
        props: { class: 'setting-title', content: '当前页面背景色' }
      },
      {
        tag: 'form-item',
        props: {
          label: '背景填充色',
          class: 'px-4'
        },
        child: { tag: 'color', field: args.pageFields.background, defaultValue: 'rgba(56,181,179,1)' }
      },
      { tag: 'divider' },
      {
        tag: 'text',
        props: { class: 'setting-title', content: '列表标题设置' }
      },
      // {
      //   tag: 'form-item',
      //   props: {
      //     label: '标题文字：',
      //     class: 'px-4'
      //   },
      //   child: { tag: 'input', field: args.fields.title.size, props: { placeholder: '请输入' } }
      // },
      {
        tag: 'form-item',
        props: {
          label: '文字设置',
          class: 'px-4'
        },
        child: { tag: 'color', field: args.fields.title.color }
      },
      {
        tag: 'form-item',
        props: { class: 'px-4' },
        child: {
          tag: 'size',
          field: [args.fields.title.size, args.fields.title.letterSpacing, args.fields.title.lineHeight]
        }
      },
      { tag: 'divider' },
      {
        tag: 'text',
        props: { class: 'setting-title', content: '功能样式' }
      },
      {
        tag: 'form-item',
        props: {
          label: '功能样式',
          class: 'px-4'
        },
        child: {
          tag: 'radio-group',
          custom: true,
          props: {
            class: 'flex justify-between'
          },
          field: args.fields.layout.style,
          slots: {
            default: () => {
              if (args.type === 'article') {
                return (
                  <>
                    {Object.keys(gridIconTemplates).map((item, idx) => (
                      <Radio value={idx + 1} class="w-16">
                        <div class="icon w-[60px] h-[60px] px-1 ">
                          <Image preview={false} src={gridIconTemplates[item]}></Image>
                        </div>
                        <span class="title">{idx === 0 ? '2列平铺' : idx === 1 ? '3列平铺' : '横向滚动'}</span>
                      </Radio>
                    ))}
                  </>
                )
              } else {
                return (
                  <>
                    <div>
                      {filterResultStyleTemplates.map((item, idx) => (
                        <Radio value={idx + 1} class="w-16" style={idx === 1 ? 'margin-left:24px' : ''}>
                          <div class="icon w-[60px] h-[60px] px-1">
                            <Image preview={false} src={item.icon}></Image>
                          </div>
                          <span class="title">{item.label}</span>
                        </Radio>
                      ))}
                    </div>
                  </>
                )
              }
            }
          }
        }
      },
      { tag: 'divider' },
      {
        tag: 'text',
        props: { class: 'setting-title', content: args.type === 'article' ? '列表文章数量' : '列表图集数量' }
      },
      {
        tag: 'form-item',
        props: {
          label: args.type === 'article' ? '文章数量' : '图集数量',
          class: 'px-4'
        },
        child: {
          tag: 'slider',
          field: args.fields.layout.limit,
          props: {
            max: 22,
            min: 0
          }
        }
      },
      { tag: 'divider' }
    ]
  }
}

/** 文章分类标签 */
export const articleTabBar = (props: ArticleTabBarProps = articleTabBarDefaultProps): ConfigComponent => {
  const args = { ...articleTabBarDefaultProps, ...props }
  return {
    sort: args.sort as number,
    type: 'comp',
    title: '文章分类标签',
    icon: 'comp_categoriesTags',
    global: simpleGlobal({
      primary: commonGlobalFields.simple.primary
    }),
    schemas: [
      {
        tag: 'text',
        props: { class: 'setting-title', content: '当前页面背景色' }
      },
      {
        tag: 'form-item',
        props: {
          label: '背景填充色',
          class: 'px-4'
        },
        child: { tag: 'color', field: args.pageFields.background, defaultValue: 'rgba(56,181,179,1)' }
      },
      { tag: 'divider' },
      {
        tag: 'text',
        props: { class: 'setting-title', content: '标签样式' }
      },
      {
        tag: 'form-item',
        props: {
          label: '选择样式：',
          class: 'px-4'
        },
        child: {
          tag: 'radio-group',
          custom: false,
          iconTemplate: true,
          field: args.fields.style,
          props: {
            class: 'block w-full flex flex-col'
          },
          slots: {
            default: () => {
              return (
                <>
                  {ArticleIconTemplates.map((item, idx) => (
                    <div class="mb-2">
                      <Radio value={idx + 1} class="w-full text-left">
                        <span class="title">{item.label}</span>
                      </Radio>
                      <Image preview={false} src={item.icon} class="mt-2"></Image>
                    </div>
                  ))}
                </>
              )
            }
          }
        }
      },
      { tag: 'divider' },
      {
        tag: 'text',
        props: { class: 'setting-title', content: '标签颜色' }
      },
      {
        tag: 'form-item',
        props: {
          label: '标签填充色',
          class: 'px-4'
        },
        child: { tag: 'color', field: args.fields.fill }
      },
      {
        tag: 'form-item',
        props: {
          label: '外框颜色',
          class: 'px-4'
        },
        child: { tag: 'color', field: args.fields.border.color, defaultValue: 'rgba(120,140,179,1)' }
      },
      {
        tag: 'form-item',
        props: {
          label: '文字设置',
          class: 'px-4'
        },
        child: { tag: 'color', field: args.fields.text.color }
      },
      {
        tag: 'form-item',
        props: {
          class: 'px-4'
        },
        child: {
          tag: 'size',
          field: [args.fields.text.size, args.fields.text.letterSpacing, args.fields.text.lineHeight]
        }
      },
      {
        tag: 'form-item',
        props: {
          label: '外框圆角',
          class: 'px-4'
        },
        child: {
          field: args.fields.border.radius,
          tag: 'slider',
          props: {
            max: 22,
            min: 0
          }
        }
      },
      { tag: 'divider' }
    ]
  }
}

/** 简介内容 */
export const briefIntroductionContent = (
  props: BriefIntroductionProps = briefIntroductionDefaultProps
): ConfigComponent => {
  const args = { ...briefIntroductionDefaultProps, ...props }
  return {
    type: 'comp',
    title: '简介内容',
    icon: 'comp_briefIntroductionContent',
    sort: args.sort as number,
    global: simpleGlobal({
      primary: commonGlobalFields.simple.primary
    }),
    schemas: [
      {
        tag: 'text',
        props: { class: 'setting-title', content: '当前页面背景色' }
      },
      {
        tag: 'form-item',
        props: {
          label: '背景填充色',
          class: 'px-4'
        },
        child: { tag: 'color', field: args.pageFields.background, defaultValue: 'rgba(56,181,179,1)' }
      },
      { tag: 'divider' },
      {
        tag: 'text',
        props: { class: 'setting-title', content: '简介内容框填充色设置' }
      },
      {
        tag: 'form-item',
        props: {
          label: '填充色',
          class: 'px-4'
        },
        child: { tag: 'color', field: args.fields.background, defaultValue: 'rgba(56,181,179,1)' }
      },
      { tag: 'divider' },

      {
        tag: 'text',
        props: { class: 'setting-title', content: '简介更多按钮' }
      },
      {
        tag: 'form-item',
        props: {
          label: '是否显示：',
          class: 'px-4 flex flex-row play-count-text'
        },
        child: {
          tag: 'radio-group',
          field: args.fields.moreButton.enable,
          props: {
            options: [
              { value: 1, label: '是' },
              { value: 2, label: '否' }
            ],
            class: 'pd-2'
          }
        }
      },
      {
        tag: 'form-item',
        props: {
          label: '图标样式：',
          class: 'px-4'
        },
        child: {
          tag: 'radio-group',
          custom: true,
          props: {},
          field: args.fields.moreButton.style,
          slots: {
            default: () => {
              return (
                <>
                  <div>
                    {Object.keys(ExpandIconTemplates).map((item, idx) => (
                      <div class={idx === 1 ? 'ml-11 inline-block' : 'inline-block'}>
                        <Radio value={idx + 1} class="w-10">
                          <div class="icon w-9 h-9 px-1">
                            <Image preview={false} src={ExpandIconTemplates[item]}></Image>
                          </div>
                          <span class="title">模板{idx + 1}</span>
                        </Radio>
                      </div>
                    ))}
                  </div>
                </>
              )
            }
          }
        }
      },
      { tag: 'divider' }
    ]
  }
}

/** 收藏阅读 */
export const collectionReading = (props: CollectionReadingProps = collectionReadingDefaultProps): ConfigComponent => {
  const args = { ...collectionReadingDefaultProps, ...props }
  return {
    sort: args.sort as number,
    title: '收藏阅读',
    type: 'comp',
    icon: 'comp_collectionReading',
    global: simpleGlobal({
      primary: commonGlobalFields.simple.primary
    }),
    schemas: [
      {
        tag: 'text',
        props: { class: 'setting-title', content: '当前页面背景色' }
      },
      {
        tag: 'form-item',
        props: {
          label: '背景填充色',
          class: 'px-4'
        },
        child: { tag: 'color', field: args.pageFields.background, defaultValue: 'rgba(56,181,179,1)' }
      },
      { tag: 'divider' },
      {
        tag: 'text',
        props: { class: 'setting-title', content: '按钮组件样式' }
      },
      {
        tag: 'form-item',
        props: {
          label: '选择样式',
          class: 'px-4'
        },
        child: {
          tag: 'radio-group',
          custom: false,
          iconTemplate: true,
          field: args.fields.style,
          props: {
            class: 'block w-full flex flex-col'
          },
          slots: {
            default: () => {
              return (
                <>
                  {ButtonIconTemplates.map((item, idx) => (
                    <div class="mb-2">
                      <Radio value={idx + 1} class="w-full text-left">
                        <span class="title">{item.label}</span>
                      </Radio>
                      <Image preview={false} src={item.icon} class="mt-2"></Image>
                    </div>
                  ))}
                </>
              )
            }
          }
        }
      },
      { tag: 'divider' },
      {
        tag: 'text',
        props: { class: 'setting-title', content: '收藏按钮设置' }
      },
      {
        tag: 'form-item',
        props: {
          label: '按钮填充色',
          class: 'px-4'
        },
        child: { tag: 'color', field: args.fields.collection.fill, defaultValue: 'rgba(56,181,179,1)' }
      },
      {
        tag: 'form-item',
        props: {
          label: '按钮文字颜色',
          class: 'px-4'
        },
        child: { tag: 'color', field: args.fields.collection.color, defaultValue: 'rgba(56,181,179,1)' }
      },
      { tag: 'divider' },
      {
        tag: 'text',
        props: { class: 'setting-title', content: '阅读按钮设置' }
      },
      {
        tag: 'form-item',
        props: {
          label: '按钮填充色',
          class: 'px-4'
        },
        child: { tag: 'color', field: args.fields.read.fill, defaultValue: 'rgba(56,181,179,1)' }
      },
      {
        tag: 'form-item',
        props: {
          label: '按钮文字颜色',
          class: 'px-4'
        },
        child: { tag: 'color', field: args.fields.read.color, defaultValue: 'rgba(56,181,179,1)' }
      },
      { tag: 'divider' }
    ]
  }
}

/** 文章设置 */
export const articleSettings = (props: ArticleSettingsProps = articleSettingsDefaultProps): ConfigComponent => {
  const args = { ...articleSettingsDefaultProps, ...props }
  return {
    type: 'comp',
    title: '文章设置',
    icon: 'comp_articleSettings',
    sort: args.sort as number,
    global: simpleGlobal({
      primary: commonGlobalFields.simple.primary
    }),
    schemas: [
      {
        tag: 'text',
        props: { class: 'setting-title', content: '界面风格样式' }
      },
      {
        tag: 'form-item',
        props: {
          label: '样式选择',
          class: 'px-4'
        },
        child: {
          tag: 'radio-group',
          custom: false,
          iconTemplate: true,
          props: {
            class: 'block w-full flex flex-col'
          },
          slots: {
            default: () => {
              return (
                <>
                  {ReadStyleIconTemplates.map((item, idx) => (
                    <div class="mb-2">
                      <Radio value={idx + 1} class="w-full text-left">
                        <span class="title">{item.label}</span>
                      </Radio>
                      <Image preview={false} src={item.icon} class="mt-2"></Image>
                    </div>
                  ))}
                </>
              )
            }
          }
        }
      }
    ]
  }
}

/** 图集顶部功能组件 */
export const topFunction = (props: TopFunctionProps = topFunctionDefaultProps): ConfigComponent => {
  const args = { ...articleSettingsDefaultProps, ...props }
  return {
    type: 'comp',
    title: '顶部功能',
    icon: 'comp_topFunction',
    sort: args.sort as number,
    global: simpleGlobal({
      primary: commonGlobalFields.simple.primary
    }),
    schemas: [
      {
        tag: 'text',
        props: { class: 'setting-title', content: '顶部组件样式' }
      },
      {
        tag: 'form-item',
        props: {
          label: '样式选择',
          class: 'px-4'
        },
        child: {
          tag: 'radio-group',
          custom: false,
          field: args.fields.topBar.style,
          iconTemplate: true,
          props: {
            class: 'block w-full flex flex-col'
          },
          slots: {
            default: () => {
              return (
                <>
                  {AtlasTopIconTemplates.map((item, idx) => (
                    <div class="mb-2">
                      <Radio value={idx + 1} class="w-full text-left">
                        <span class="title">{item.label}</span>
                      </Radio>
                      <Image preview={false} src={item.icon} class="mt-2"></Image>
                    </div>
                  ))}
                </>
              )
            }
          }
        }
      }
    ]
  }
}

/** 图集列表 */
export const atlasMoreList = (props: AtlasMoreListProps = atlasMoreListDefaultProps): ConfigComponent => {
  const args = { ...atlasMoreListDefaultProps, ...props }
  return {
    type: 'comp',
    title: '图集列表更多页',
    icon: 'comp_atlasList',
    sort: args.sort as number,
    global: listGlobal(commonGlobalFields),
    schemas: [
      {
        tag: 'text',
        props: { class: 'setting-title', content: '当前页面背景色' }
      },
      {
        tag: 'form-item',
        props: {
          label: '背景填充色',
          class: 'px-4'
        },
        child: { tag: 'color', defaultValue: 'rgba(56,181,179,1)' }
      },
      { tag: 'divider' },
      {
        tag: 'text',
        props: { class: 'setting-title', content: '图集卡片背景色' }
      },
      {
        tag: 'form-item',
        props: {
          label: '背景填充色',
          class: 'px-4'
        },
        child: { tag: 'color', defaultValue: 'rgba(56,181,179,1)' }
      },
      { tag: 'divider' },
      {
        tag: 'text',
        props: { class: 'setting-title', content: '列表显示样式' }
      },
      {
        tag: 'form-item',
        props: {
          label: '选择样式：',
          class: 'px-4'
        },
        child: {
          tag: 'radio-group',
          custom: true,
          props: {
            class: 'flex justify-between'
          },
          slots: {
            default: () => {
              return (
                <>
                  <div>
                    {filterResultStyleTemplates.map((item, idx) => (
                      <Radio value={idx + 1} class="w-16" style={idx === 1 ? 'margin-left:24px' : ''}>
                        <div class="icon w-[60px] h-[60px] px-1">
                          <Image preview={false} src={item.icon}></Image>
                        </div>
                        <span class="title">{item.label}</span>
                      </Radio>
                    ))}
                  </div>
                </>
              )
            }
          }
        }
      },
      { tag: 'divider' },
      {
        tag: 'text',
        props: { class: 'setting-title', content: '列表分页设置' }
      },
      {
        tag: 'form-item',
        props: {
          label: '图集数量',
          class: 'px-4'
        },
        child: {
          tag: 'slider',
          props: {
            max: 22,
            min: 0
          }
        }
      },
      { tag: 'divider' }
    ]
  }
}

/** 全局设置 */
export const globalSettings = (props: GlobalSettingsProps): ConfigComponent => {
  const args = { ...globalSettingsDefaultProps, ...props }
  return {
    type: 'comp',
    key: 'globalSetting',
    title: '全局设置',
    icon: 'comp_globalSetting',
    global: globalsComponent(props.fields),
    sort: args.sort as number,
    schemas: [
      {
        tag: 'collapse-item',
        props: {
          header: '演示数据'
        }
      }
    ]
  }
}
